<template>
  <div
    v-if="opened"
    v-dragMove="{
      DragButton: '.ReplyFormTitle',
      DragWindow: '.ReplyForm',
    }"
  >
    <div class="window ReplyForm">
      <div
        :class="[
          'title-bar',
          'ReplyFormTitle',
          titleBarInactive ? 'inactive' : '',
        ]"
      >
        <img
          class="title-bar-img"
          src="@/assets/win98icons/users_green-4.png"
        />
        <div class="title-bar-text">Reply</div>
        <div class="title-bar-controls">
          <button aria-label="Close" @click="close()"></button>
        </div>
      </div>
      <div class="window-body">
        <!-- <pre>{{ record }}</pre> -->
        <div class="field-row-stacked">
          <label for="text_description">Issue Description</label>
          <textarea
            id="text_description"
            rows="4"
            style="resize: none"
            v-model="record.description"
            placeholder="请输入问题描述"
            disabled
          ></textarea>
        </div>
        <div class="field-row-stacked">
          <label for="text_reply">Replied Informations</label>
          <textarea
            id="text_reply"
            rows="4"
            style="resize: none"
            v-model="replyContent"
            placeholder="请输入技保/网络的回复内容(不少于10个字)"
          ></textarea>
        </div>
        <div style="text-align: center; margin-top: 12px">
          <button
            @click="handleClickSave()"
            :disabled="replyContent.length < 10"
          >
            Save Reply
          </button>
        </div>
      </div>
    </div>
  </div>
  <div
    class="modal-cover"
    style="z-index: 5"
    v-if="opened"
    @click="handleModalClick()"
  ></div>
</template>

<script setup>
import { ref, computed, nextTick, onMounted, onUnmounted, h } from "vue";
import dayjs from "dayjs";
import handleReply from "./handleReply.js";

const emit = defineEmits(["close", "update"]);

const record = ref();
const opened = ref(false);

const open = (recordValue) => {
  record.value = recordValue;
  replyContent.value = "";
  opened.value = true;
};

defineExpose({ open });

const close = () => {
  opened.value = false;
  emit("close");
};

const replyContent = ref("");

const handleClickSave = () => {
  let reply = "";
  let number = record.value.number;
  if (record.value.reply.length > 0) {
    reply = `${record.value.reply}\n\n[${dayjs().format(
      "YYYY-MM-DD HH:mm:ss"
    )}新增回复]\n${replyContent.value}`;
  } else {
    reply = replyContent.value;
  }
  handleReply(number, reply).then(() => {
    emit("update");
  });
  close();
};

const titleBarInactive = ref(false);
let modalClickTimer = null;
let modalClickCounter = 0;
const handleModalClick = () => {
  modalClickCounter = 0;
  modalClickTimer = setInterval(() => {
    titleBarInactive.value = !titleBarInactive.value;
    modalClickCounter++;
    if (modalClickCounter >= 10) {
      titleBarInactive.value = false;
      clearInterval(modalClickTimer);
    }
  }, 50);
};
</script>

<style scoped>
@import "@/styles/98.css";
@import "@/styles/98custom.css";

.ReplyForm {
  z-index: 6;
  width: 300px;
  /* height: 100px; */
  left: calc(50% - 150px);
  top: 200px;
}
</style>
